<template>
  <div class="contain" v-if="hotelmsg">
    <div v-for="(item,index) in hotelmsg" :key="index" >
        <div class="HeaderDetail">
            <!-- 面包屑 -->
              <el-breadcrumb separator="/" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/hotel?cityName=北京市' }">酒店</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/hotel?cityName=北京市">{{item.real_city}}酒店</a></el-breadcrumb-item>
                <el-breadcrumb-item>{{item.name}}</el-breadcrumb-item>
              </el-breadcrumb>
              <!-- 店名 -->
              <h4 class='hotel-cn-name'>{{item.name}}</h4>
              <!-- 酒店电话 -->
              <span class="hotel-en-nam">
                  预订电话：{{item.phone}}
              </span>
              <!-- 地址 -->
              <div class="el-row">
                <i class="iconfont iconlocation"></i>
                {{item.area}}
              </div>
        </div>
        <div class="images">
            <div class="leftImage">
              <img src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg" alt="">
            </div>
            <div class="rightImage">
              <img src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg" alt="">
              <img src="http://157.122.54.189:9093/images/hotel-pics/2.jpeg" alt="">
              <img src="http://157.122.54.189:9093/images/hotel-pics/3.jpeg" alt="">
              <img src="http://157.122.54.189:9093/images/hotel-pics/4.jpeg" alt="">
              <img src="http://157.122.54.189:9093/images/hotel-pics/5.jpeg" alt="">
              <img src="http://157.122.54.189:9093/images/hotel-pics/6.jpeg" alt="">
            </div>
        </div>
        <div class="hotelType">
          <el-table
                :data="item.products"
                stripe
                style="width: 100%">
              <el-table-column
                prop="name"
                label="价格来源"
                width="400">
              </el-table-column>
              <el-table-column
                prop="bestType"
                label="低价房型"
                width="400">
              </el-table-column>
              <el-table-column
                prop="price"
                label="最低价格/每晚"
                width="200">
                <template slot-scope="scope">
                  <span>￥{{scope.row.price}}</span>
                  起
                  <span>></span>
                </template>
              </el-table-column>
          </el-table>
        </div>
        <div class="map" v-if="hotelmsg">
            <div id="mapLeft">
              
            </div>
            <div class="mapRight">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="风景" name="0">
                    <ul>
                      <li 
                      v-for="(item,index) in opiList" 
                      :key="index"
                      @mouseover="trueid(item)">
                         <span class="name">{{item.name}}</span>
                         <!-- <span class="rating">{{item.biz_ext.rating}}</span> -->
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="交通" name="1">
                    <ul>
                      <li 
                      v-for="(item,index) in opiList" 
                      :key="index"
                      @mouseover="trueid(item)">
                         <span class="name">{{item.name}}</span>
                         <!-- <span class="rating">{{item.biz_ext.rating}}</span> -->
                      </li>
                    </ul>
                  </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="hotelMsg">
          <div class="Msg">
            <div class="assets-info-hd">
              基本信息
            </div>
            <div class="assets-info-bd">
              <span class="basic">入住时间：14：00之后</span>
              <span class="basic">离店时间：12：00之前</span>
              <span class="basic">{{item.creation_time}}/{{item.renovat_time}}</span>
              <span class="basic">酒店规模：{{item.roomCount}}</span>
            </div>
          </div>
          <div class="Msg">
            <div class="assets-info-hd">
              主要设施
            </div>
            <div class="assets-info-bd">
              <span 
              class="myspan" 
              v-for="(item,index) in item.hotelassets"
              :key="index">
                   {{item.name}}
              </span>
            </div>
          </div>
          <div class="Msg">
            <div class="assets-info-hd">
              停车服务
            </div>
            <div class="assets-info-bd">
              门口免费停车；免费洗车；更换备胎
            </div>
          </div>
          <div class="Msg">
            <div class="assets-info-hd">
              品牌信息
            </div>
            <div class="assets-info-bd" v-if="item.hotelbrand">
              {{item.hotelbrand.name}}
            </div>
          </div>
        </div>
        <div class="hotelComment">
          <h4>
            {{item.all_remarks}}条真实用户评论
          </h4>
          <div class="realComment">
            <el-row type='flex'>
                <el-col :span="4">
                    <p>总评数：{{item.all_remarks}}</p>
                    <p>好评数：{{item.good_remarks}}</p>
                    <p>差评数：{{item.bad_remarks}}</p>
                </el-col>
                <el-col :span="5" class="start">
                  <div class="many">
                      <i class="el-icon-star-on"></i>
                      <i class="el-icon-star-on"></i>
                      <i class="el-icon-star-on"></i>
                      <i class="el-icon-star-on"></i>
                      <i class="el-icon-star-on"></i>
                      <i>4分</i>
                  </div>
                  <div class="stamp">推荐</div>
                </el-col>
                <el-col :span="3" class="scores">
                  <el-progress 
                    type="circle" 
                    :percentage="Number(item.scores.environment)*10" 
                    color='orange'
                    :show-text="false"
                    :width="70"
                    :stroke-width='2'>
                  </el-progress>
                  <span class="env">
                    环境
                  </span>
                  <span class="value">
                    {{item.scores.environment}}
                  </span>
                </el-col>
                <el-col :span="3" class="scores">
                  <el-progress 
                  type="circle" 
                  :percentage="Number(item.scores.product)*10" 
                  color='orange'
                  :show-text="false"
                  :width="70"
                  :stroke-width='2'>
                  </el-progress>
                  <span class="env">
                    产品
                  </span>
                  <span class="value">
                    {{item.scores.product}}
                  </span>
                </el-col>
                <el-col :span="3" class="scores">
                  <el-progress 
                  type="circle" 
                  :percentage="Number(item.scores.service)*10" 
                  color='orange'
                  :show-text="false"
                  :width="70"
                  :stroke-width='2'>
                  </el-progress>
                  <span class="env">
                    服务
                  </span>
                  <span class="value">
                    {{item.scores.service}}
                  </span>
                </el-col>
            </el-row>
          </div>
        </div>
   </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      // 以949为例动态渲染
      hotelmsg:[],
      opiList:[],
      map:{},
      markers:[],
      activeName: '0',
      typelist:['风景','交通'],
      jing:'',
      wei:''

    }
  },
  created(){

  },
  async mounted(){
   await this.Getdata();
   await this.Getpois();
   this.Getmap();
  },
  methods:{
    // 获取酒店详情数据
    Getdata(){
      //  以id为949为例
     return  this.$axios({
        url:"http://157.122.54.189:9095/hotels",
        params:{
          id:this.$route.params.id
        }
      }).then(res=>{

        this.hotelmsg=res.data.data
        // console.log((this.hotelmsg[0].location.latitude).toFixed(6))
        // console.log((this.hotelmsg[0].location.longitude).toFixed(6))
      })
    },
    // 创建地图
    Getmap(){
      window.onLoad  = function(){
        this.map = new AMap.Map('mapLeft',{
            zoom:14,
            center:[this.hotelmsg[0].location.latitude,this.hotelmsg[0].location.latitude]
        });
        // ---------------------------------地图风景的标记点
        this.setMarkers()
        // --------------------------------
        }.bind(this)
        var url = 'https://webapi.amap.com/maps?v=1.4.15&key=0b5115a8a601ec8f799d14bb5f956541&callback=onLoad';
        var jsapi = document.createElement('script');
        jsapi.charset = 'utf-8';
        jsapi.src = url;
        document.head.appendChild(jsapi); 
    },
    // 获取pois数据
    Getpois(){
     return this.$axios({
        url:"https://restapi.amap.com/v3/place/around?parameters",
        params:{
          key:'54f1be8abcde8c409e23ef004b814479',
          keywords: '',
          city: this.hotelmsg[0].city.name,
          location: `${(this.hotelmsg[0].location.latitude).toFixed(6)},${(this.hotelmsg[0].location.longitude).toFixed(6)}`,
          types:this.typelist[Number(this.activeName)],
          output: 'json',
          page: 1,
          offset: 10
        }
       }).then(res=>{
            this.opiList=res.data.pois
            console.log(this.opiList)
       })
    },
    setMarkers(){
       this.markers=this.opiList.map(poi=>{
         var marker=new AMap.Marker({
           title:poi.name,
           position:poi.location.split(','),
          //  给marker新增自定义，将每个poi的id添加进去
           extData:poi.id
         })
        //  给每个标记点设置居中以及提示框
        marker.on('mouseover',()=>{
          return this.trueid(poi)
        })
         return marker
       })
       this.map.add(this.markers)
       this.map.setFitView()
    },
    async handleClick(tab, e) {
      // 先将index赋值给activeName
      this.activeName=tab.index
      // 移除旧的markers数组
      this.map.remove(this.markers)
      // 等待获取完新的pois
      await this.Getpois()
      // 获取新的markers
      this.setMarkers() 
    },
    // 给li标签注册鼠标移入事件
    trueid(poi){
      // 遍历所有点，找到匹配的id
      this.markers.forEach(marker=>{
        if(marker.getExtData()===poi.id){
          // 将匹配的点置顶
          marker.setTop(true)
          // 显示一个提示框
          const infoWindow=new AMap.InfoWindow({
            content:`<span style="font-size:12px;color:#333">${marker.getTitle()}</span>`,
            offset:new AMap.Pixel(0,-32)
          })
          infoWindow.open(this.map,marker.getPosition())
          // 将该点居中
          this.map.setCenter(marker.getPosition())
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.contain{
  width: 1000px;
  margin: 0 auto;
  .HeaderDetail{
      padding-bottom: 40px;
      .breadcrumb{
        margin-top: 5px;
        padding: 20px 0;
        font-size: 14px;
      }
      .hotel-cn-name{
        margin-top: 5px;
        color: #333;
        font-weight: 400;
        font-size: x-large
      }
      .hotel-en-nam{
        margin-top: 5px;
        font-size: 16px;
        word-spacing: 1px;
      }
      .el-row{
        margin-top: 5px;
        color: #666;
        font-size: 14px;
        .iconlocation{
          font-size: 16px;
        }
      }
  }
  .images{
    width: 100%;
    height: 360px;
    .leftImage{
      float: left;
      width: 640px;
      height: 360px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .rightImage{
        float: right;
        // display: flex;
        // flex-direction:column;
        // justify-content: space-between;
        // flex-wrap:wrap;
        height: 360px;
        width: 340px;
        overflow: hidden;
        // background-color: pink; 
        img{
          float: left;
          margin-bottom: 15px;
          margin-right: 10px;
          // margin-right: 5px;
          width: 160px;
          height: 110px;
        }
    }

  }
  .hotelType{
    margin-top: 70px;
    cursor: pointer;
    span{
      color: #fa3;
    }
  }
  .map{
    margin-top: 30px;
    margin-bottom: 30px;
    height: 360px;
    #mapLeft{
      float: left;
      width: 650px;
      height: 360px;
    }
    .mapRight{
      float: right;
      margin-left: 20px;
      width: 330px;
      height: 360px;
      ul{
        height: 310px;
        overflow: auto;
      li{
        padding: 10px 15px;
        color: #666;
        display: flex;
        .name{
          flex: 1;
        }
      }
      }

    }
  }
  .hotelMsg{
    cursor: pointer;
    margin-bottom: 20px;
     .Msg{
       width: 100%;
       border-bottom: 1px solid #ccc;
       box-sizing: border-box;
       height: 60px;
       line-height: 60px;
       .assets-info-hd{
          float: left;
          width: 170px;
          font-size: 14px;
          padding-left: 20px;
          box-sizing: border-box;
       }
       .assets-info-bd{
          float: left;
          display: flex;
          width: 830px;
          font-size: 14px;
          color: #666;
          .basic{
            flex: 1;
          }
          .myspan{
            margin-top: 15px;
            padding: 5px 10px;
            height: 20px;
            line-height: 20px;
            background-color: #eeeeee;
            margin-right: 10px;
            border-radius: 3px;
          }
       }

     }
  }
  .hotelComment{
    margin-top: 20px;
    h4{
      font-size: 16px;
    }
    .realComment{
      padding: 20px 0;
      p{
        color: #666;
      }
      .start{
        position: relative;
        .stamp{
          position: absolute;
          left: 20px;
          border: 2px solid #fa3;
          text-align: center;
          line-height: 70px;
          width: 70px;
          height: 70px;
          border-radius: 50%;
          opacity: .25;
          transform: rotate(-30deg);
        }
        .many{
          position: absolute;
          top:20px;
          left: 10px;
            i{
              float: left;
              padding-right:3px ;
              color: #fa3;
              font-size: 18px;
            }
            i:nth-child(5){
              color: aliceblue;
            }
        }
      }
      .scores{
        position: relative;
        .env{
          position: absolute;
          color:#fa3 ;
          top: 30%;
          left: 27%;
          text-align: center;
          transform: translate(-50%,-50%);
        }
        .value{
          position: absolute;
          color:#fa3 ;
          top: 60%;
          left: 27%;
          text-align: center;
          transform: translate(-50%,-50%);
        }
      }
    }
  }
}
</style>